<template>
  <div class="message-page">
    <!-- 头部 -->
    <div class="header">
      <h1 class="title">消息</h1>
      <button class="wechat-exchange">
        <span class="wechat-icon">💬</span>
        交换微信
      </button>
    </div>

    <!-- 未读消息横幅 -->
    <div class="unread-banner">
      <div class="banner-content">
        <div class="banner-icon">
          <div class="dots">•••</div>
        </div>
        <div class="banner-text">
          <div class="banner-title">你有未读消息</div>
          <div class="banner-subtitle">点击查看 所有消息</div>
        </div>
        <div class="banner-arrow">›</div>
      </div>
      <div class="banner-indicators">
        <span class="indicator active"></span>
        <span class="indicator"></span>
        <span class="indicator"></span>
      </div>
    </div>

    <!-- 最近相互喜欢 -->
    <div class="mutual-likes">
      <div class="section-header">
        最近相互喜欢
        <span class="help-icon">?</span>
      </div>
      <div class="avatars">
        <div class="avatar-wrapper" v-for="(user, index) in mutualLikes" :key="index" :class="{ active: index === 0 }">
          <img :src="user.avatar" alt="User" class="avatar" />
        </div>
      </div>
    </div>

    <!-- 全部消息 -->
    <div class="all-messages">
      <div class="section-header">全部消息</div>

 

      <!-- 个人消息列表 -->
      <div v-if="isLoading" class="loading-state">
        <div class="loading-spinner"></div>
        <div class="loading-text">加载中...</div>
      </div>
      <div v-else-if="hasError" class="error-state">
        <div class="error-icon">⚠️</div>
        <div class="error-text">加载失败，请稍后重试</div>
        <button class="retry-button" @click="fetchMessages">重试</button>
      </div>
      <template v-else>
        <div  class="message-item"  @click="openMessage(friend.id)" v-for="(friend, index) in messageStore.friends" :key="index" >
          <div class="avatar-wrapper" >
            <img :src="friend.avatar" alt="User" class="avatar" />
            <span class="unread-count" v-if="friend.unreadCount > 0">
              {{ friend.unreadCount }}
            </span>
          </div>
          <div class="message-content">
            <div class="message-title">
              {{ friend.name }}
              <span class="verified-badge" v-if="friend.isVerified">已实名</span>
            </div>
            <div class="message-info">
              {{ friend.info.age }}岁 · {{ friend.info.currentAddress }} · {{ friend.info.occupation }} · {{ friend.info.height }}cm
            </div>
          </div>
          <div class="message-meta">
            <span class="time">{{ friend.time }}</span>
            <span class="lock-icon" v-if="friend.isLocked">🔒</span>
          </div>
        </div>
      </template>
    </div>
    <!-- 底部导航栏 -->
    <FooterBar :nav-items="customNavItems" :unread-count="unreadCount" :has-new-notification="hasNewNotification" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { useMessageStore } from '@/stores/message'

const router = useRouter()
import FooterBar from '@/components/footerBar/FooterBar.vue'
const formData = new FormData()
formData.append('userId', JSON.parse(localStorage.getItem('userInfo')).id)
// 响应式数据
const friends = ref([])
const mutualLikes = ref([])
const unreadCount = ref(0)
const hasNewNotification = ref(false)
const messageStore = useMessageStore()
const isLoading = ref(false)
const hasError = ref(false)

const openMessage = (receiverId) => {
  console.log("请求");
  router.push({
    path: '/chatbox',
    query: {
      receiverId: receiverId
    }
  });
};

// 获取消息列表
const fetchMessages = async () => {
  isLoading.value = true
  hasError.value = false
  
  try {
    await messageStore.getMessages()
  } catch (error) {
    console.error('获取消息列表失败:', error)
    hasError.value = true
  } finally {
    isLoading.value = false
  }
}



// 生命周期钩子
onMounted(async () => {
  await fetchMessages()
})

// 自定义导航项
const customNavItems = ref([
  {
    path: '/recommend',
    name: '推荐',
    icon: '🔍',
    badgeType: null
  },
  {
    path: '/meet',
    name: '见面',
    icon: '👥',
    forceHighlight: true
  },
])
</script>

<style scoped>
.message-page {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 414px;
  margin: 0 auto;
  min-height: 100vh;
  background: linear-gradient(to bottom right, #e9d5ff, #fff1f2);
  position: relative;
  padding-bottom: 60px;
}

/* 状态栏样式 */
.status-bar {
  display: flex;
  justify-content: space-between;
  padding: 10px 16px;
  color: #000;
  font-weight: bold;
}

.status-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.battery {
  background-color: #ffeb3b;
  padding: 2px 4px;
  border-radius: 10px;
  font-size: 12px;
}

/* 头部样式 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.wechat-exchange {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
}

/* 未读消息横幅样式 */
.unread-banner {
  margin: 0 16px;
  background: linear-gradient(135deg, #a78bfa, #818cf8);
  border-radius: 12px;
  padding: 16px;
  color: white;
  position: relative;
  overflow: hidden;
}

.banner-content {
  display: flex;
  align-items: center;
  gap: 16px;
}

.banner-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dots {
  color: white;
  font-size: 20px;
  letter-spacing: 2px;
}

.banner-text {
  flex: 1;
}

.banner-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.banner-subtitle {
  font-size: 12px;
  opacity: 0.8;
}

.banner-arrow {
  font-size: 20px;
}

.banner-indicators {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 12px;
}

.indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
}

.indicator.active {
  background-color: white;
}

/* 最近相互喜欢样式 */
.mutual-likes {
  padding: 20px 16px;
}

.section-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.help-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
}

.avatars {
  display: flex;
  gap: 16px;
}

.avatar-wrapper {
  position: relative;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid transparent;
}

.avatar-wrapper.active .avatar {
  border-color: #818cf8;
}

/* 全部消息样式 */
.all-messages {
  padding: 0 16px;
}

.message-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.avatar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
}

.avatar-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.unread-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: #f87171;
  color: white;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-content {
  flex: 1;
}

.message-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.verified-badge {
  background-color: #10b981;
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  font-weight: normal;
}

.message-info,
.message-subtitle {
  font-size: 12px;
  color: #666;
}

.message-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.time {
  font-size: 12px;
  color: #999;
}

/* 加载状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  padding: 20px;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #8e8ef1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  font-size: 14px;
}

/* 错误状态样式 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  text-align: center;
  padding: 20px;
}

.error-icon {
  font-size: 48px;
  margin-bottom: 15px;
}

.error-text {
  font-size: 16px;
  margin-bottom: 20px;
}

.retry-button {
  padding: 8px 20px;
  background-color: #8e8ef1;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.retry-button:hover {
  background-color: #7a7ae0;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>